import React from 'react';

import { ReactComponent as Chevrone } from '@/assets/images/auth/Chevrone.svg';
import { urls } from '@/shared/constants/urls';
import { Button, FlexWrapper } from '@/shared/ui';
import cn from 'classnames';
import { useWindowSize } from 'usehooks-ts';

import s from './TitleBlock.module.scss';

type Props = {
  handleGoBack: () => void;
  hFourText?: string;
  tg?: boolean;
  withBack?: boolean;
};

export const TitleBlock = ({ handleGoBack, withBack, hFourText, tg }: Props) => {
  const { width } = useWindowSize();
  return (
    <FlexWrapper isStart={width < 768}>
      {withBack && (
        <h4 className={cn(s.goBack)} onClick={handleGoBack}>
          <span>
            <Chevrone />
          </span>
          <p style={{ marginBottom: '4px' }}>Назад</p>
        </h4>
      )}
      {hFourText && <h4 className={cn(s.inside)}>{hFourText}</h4>}
      {tg && (
        <p className={s.answer}>
          Быстрее ответим в{' '}
          <Button
            className={s.tg}
            data-testid="link-telegram_support"
            href={urls.telegramSupport}
            link
            rel="noreferrer"
            style={{ textDecoration: 'none' }}
            target="_blank"
          >
            Telegram
          </Button>
        </p>
      )}
    </FlexWrapper>
  );
};
